<template>
    <div class="phone-wrap">
        <Transition mode="out-in" name="el-fade-in-linear">
            <activity-phone
                v-show="props.phonePreviewIndex === 0"
                ref="activityGroupFissionPhoneRef"
                class="activity-h5-phone"
                width="375px"
                :scale="300 / 375"
                scroll-height="76vh">
                <div class="activity-title">
                    <el-icon><CloseBold /></el-icon>
                    <strong>{{ phoneInfo.activity_name || '活动名称' }}</strong>
                </div>
                <div class="activity-phone-main-body">
                    <div class="activity-desc">请加入以下任一分组，加入后将由专门客服为您服务：</div>
                    <div class="group-list">
                        <div v-for="(item, index) in phoneInfo.group" :key="index" class="group-item">
                            <div class="group-name">{{ item.name }}</div>
                            <div class="group-btn">去加入</div>
                        </div>
                    </div>
                    <div v-show="phoneInfo.description">
                        <div class="desc-title">活动说明：</div>
                        <div class="desc-text" v-html="handleReplaceDesc(phoneInfo.description)"></div>
                    </div>
                </div>
            </activity-phone>
        </Transition>
    </div>
</template>

<script setup lang="ts">
import activityPhone from '@/components/zw/phonePreview1.0/activityPhonePreview/index.vue';
import { onMounted, computed } from 'vue';

const emit = defineEmits(['update:modelValue', 'update:phonePreviewIndex']);

const props = defineProps({
    modelValue: {
        type: Object,
        default: () => {}
    },
    // 第三步欢迎语的样机索引
    phonePreviewIndex: {
        type: Number,
        default: 0
    }
});

const phoneInfo = computed({
    get() {
        return props.modelValue;
    },
    set(val) {
        emit('update:modelValue', val);
    }
});

/**
 * @description 替换描述的左右尖括号，把/n替换成换行
 * @param val
 */
const handleReplaceDesc = (val: string) => {
    const result = val.replace(/\</g, '&lt;').replace(/\>/g, '&gt;').replace(/\n/g, '<br />');
    return result;
};

onMounted(() => {});
</script>

<style lang="scss" scoped>
// 样机样式

.activity-h5-phone {
    position: absolute;
    margin-top: -52px;

    .el-scrollbar__view {
        padding-top: 44px;
    }
}

// 解决海报样机的问题
.phone-wrap {
    position: relative;
    display: flex;
    flex: 1;
    justify-content: center;
    box-sizing: border-box;
    height: 100%;
    padding-top: 30px;
}

.activit-phone-welcome-preview,
.poster-phone {
    position: absolute;
    margin-right: 40px;
}

.change-phone-index {
    position: absolute;
    top: 240px;
    right: 10px;
    width: 40px;
    height: 80px;
    user-select: none;
    text-align: center;
    border-radius: 2px;
    background-color: #fff;
    box-shadow: 0 2px 8px 0 #e5e5e5;
    line-height: 40px;

    > div {
        width: 40px;
        height: 40px;
        cursor: pointer;

        &.disabled {
            cursor: not-allowed;
            background-color: var(--el-disabled-bg-color);
        }
    }

    img {
        width: 16px;
        height: 16px;
    }
}

// 滚动切换的动画
.slide-enter-active {
    animation: bounce-in 0.5s;
}

.slide-leave-active {
    animation: bounce-in 0.5s reverse;
}

@keyframes bounce-in {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.25);
    }

    100% {
        transform: scale(1);
    }
}

:deep(.activity-phone-poster) {
    background: #f7f7f7;
}

.activity-title {
    position: absolute;
    z-index: 5; // 不能低于奖品icon层级
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    padding: 0 11px;
    transform: scale(1.01); // 这里放大一点是处理有细小的空隙，原因是外部样机缩放带来的影响
    text-align: center;
    color: #000;
    background-color: #fff;

    strong {
        flex: 1;
        margin-left: -14px;
    }
}

.activity-phone-main-body {
    position: relative;
    top: 45px;
    z-index: 2;

    .activity-desc {
        padding: 13px 15px 0 17px;
        font-size: 16px;
        font-family: PingFangSC-Medium, 'PingFang SC';
        font-weight: 500;
        color: #333;
        line-height: 24px;
    }

    .group-list {
        padding: 0 16px;

        .group-item {
            margin-top: 12px;
            padding: 17px 12px;
            background: #fff;
            border-radius: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            // height: 56px;

            .group-name {
                font-size: 16px;
                font-family: PingFangSC-Medium, 'PingFang SC';
                font-weight: 500;
                color: #000;
                line-height: 22px;
            }

            .group-btn {
                margin-left: 18px;
                width: 76px;
                font-size: 14px;
                font-family: PingFangSC-Regular, 'PingFang SC';
                font-weight: 400;
                color: #fff;
                text-align: center;
                line-height: 30px;
                background: linear-gradient(90deg, #ffc151 0%, #ff6b00 100%);
                box-shadow: 0 2px 6px 0 rgb(255 107 0 / 26%);
                border-radius: 15px;
            }
        }
    }

    .desc-title {
        margin: 20px 16px 0;
        font-size: 16px;
        font-family: PingFangSC-Medium, 'PingFang SC';
        font-weight: 500;
        color: #333;
        line-height: 22px;
    }

    .desc-text {
        margin: 12px 16px;
        font-size: 14px;
        font-family: PingFangSC-Regular, 'PingFang SC';
        font-weight: 400;
        color: #666;
        line-height: 20px;
        word-wrap: break-word;
    }
}
</style>
